<template>
	<view :customFooter="false"
		:footerSets="{height:100, zIndex:100, bg:'linear-gradient(to bottom, #F8F8F8,#F8F8F8)'}">

		<view>
			<!-- 文章标题 -->
			<view class="gui-padding" style="text-align: center;">
				<text class="gui-h4">{{product.title}}</text>
				<view class="gui-flex" style="font-size: 25rpx; margin-top: 10rpx;">
					<text class="gui-ellipsis gui-color-gray gui-block-text gui-icons">作者: &#xe69e; {{product.author}}</text>
					<text class="gui-ellipsis gui-color-gray gui-block-text gui-icons gui-text-center">阅读次数: &#xe609; {{product.views}}</text>
					<text v-if="product.created_at" class="gui-ellipsis gui-color-gray gui-block-text gui-icons gui-text-right">&#xe64c; {{product.created_at.split(" ")[0]}}</text>
				</view>
			</view>
			<!-- 文章内容 -->
			<view class="gui-padding gui-text">
				<!-- 	<gui-article-info
			:article="product"></gui-article-info> -->
				<!-- <rich-text id="cs" class="html_content" :nodes="product.content == null ? '' : product.content"></rich-text> -->
				<rich-text :preview="true" @itemclick="img_yulan" id="cs" class="html_content"
					:nodes="product.content == null ? '' : product.content"></rich-text>
			</view>

			<view class=""><!-- 遮盖层 -->
				<gui-page-loading ref="guipageloading"></gui-page-loading>
			</view>

			<!-- 底部占位 -->
			<view style="height:120rpx;"></view>
		</view>

		<view slot="gFooter" class="gui-flex gui-rows gui-space-between gui-align-items-center"
			style="border-top:1px solid #E8E8E8;">
			<view class="gui-flex gui-rows gui-nowrap gui-justify-content-end" style="margin-top: 10rpx;width: 100%;">
				<view @tap="gohome()" class="gui-footer-large-button gui-text-center" style="width: 30%;"
					hover-class="gui-tap">
					<text class="gui-icons" style="margin-right: 10rpx;">&#xe63b;</text>
					<text class="gui-text gui-footer-large-button-text">首页</text>
				</view>
				<!-- 2个大按钮 -->
				<view v-if="product.is_click"
					class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-end">
					<view @tap="dz()" class=" gui-footer-large-button gui-text-center gui-bg-buy" style="width: 100%;"
						hover-class="gui-tap">
						<text class="gui-text gui-color-white gui-footer-large-button-text">取消点赞</text>
					</view>
				</view>
				<view v-else
					class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-end">
					<view @tap="dz()" class=" gui-footer-large-button gui-text-center gui-bg-add-card"
						style="width: 100%;" hover-class="gui-tap">
						<text class="gui-text gui-color-white gui-footer-large-button-text">点赞</text>
					</view>
				</view>
				<!-- 2个大按钮 -->
				<view v-if="product.is_vote"
					class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-end">
					<view @tap="vote()" class=" gui-footer-large-button gui-text-center gui-bg-buy" style="width: 100%;"
						hover-class="gui-tap">
						<text class="gui-text gui-color-white gui-footer-large-button-text">取消投票</text>
					</view>
				</view>
				<view v-else
					class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-end">
					<view @tap="vote()" class=" gui-footer-large-button gui-text-center gui-bg-add-card"
						style="width: 100%;" hover-class="gui-tap">
						<text class="gui-text gui-color-white gui-footer-large-button-text">投票</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	var parserHtml = require("@/Grace6/js/parserHTML.js");
	export default {
		data() {
			return {
				// 商品信息
				title: '',
				product: [],

				id: 0,
				user: null,
			}
		},
		onLoad(option) {
			console.log(option, 'op');
			this.id = option.id;
			this.user = uni.getStorageSync("user");
		},
		onReady() {
			uni.showLoading({
				title: '加载中'
			});
			this.show_data(this.id, 1);
		},
		methods: {
			vote() { //投票
				let self = this;
				self.$refs.guipageloading.open();
				// 加载产品数据
				
				
				let url = '/activity/vote'
				let parm = {
					art_id: this.id,
					user_id: this.user.id,
					act_id: self.product.activity_id,
					is_vote: self.product.is_vote
				}
				self.$boya.NPost(url, parm, function(res) {
					self.$refs.guipageloading.close();
					if (res.code == 200) {
						uni.showToast({
							title: res.data
						});
						self.show_data(self.id);
					} else {
						uni.showModal({
							title: '提示',
							content: res.data
						});
					}
				})
			},
			gohome() {
				uni.reLaunch({
					url: "../activity/index2"
				});
			},
			dz() { //点赞
				let self = this;
				self.$refs.guipageloading.open();
				// 加载产品数据
				
				
				let url = '/activity/dz'
				let parm = {
					art_id: this.id,
					user_id: this.user.id,
					is_click: self.product.is_click
				}
				self.$boya.NPost(url, parm, function(res) {
					self.$refs.guipageloading.close();
					if (res.code == 200) {
						uni.showToast({
							title: res.data
						});
						self.show_data(self.id);
						// if(self.product.is_click){
						// 	self.product.is_click = 0;
						// 	self.product.click--;
						// }else{
						// 	self.product.is_click = 1;
						// 	self.product.click++;
						// }
					} else {
						uni.showModal({
							title: '提示',
							content: res.data
						});
					}
				})
				
			},
			img_yulan(e) {
				if (e.target.node.name == "img") {
					uni.previewImage({
						urls: [e.target.node.attrs.src],
						index: 0
					});
				}
				// console.log(e,'eeeeeeee');
			},
			//获取数据
			show_data(news_id, add_views = 0) {
				let self = this;
				console.log(news_id);
				if (news_id) {
					self.$refs.guipageloading.open();
					// 加载产品数据
					let post_data = {
						id: this.id,
						add_views: add_views
					};
					
					
					let url = '/hzj_apply/get_policy'
					let parm = {
						id: this.id,
						add_views: add_views
					}
					self.$boya.NPost(url, parm, function(res) {
						self.$refs.guipageloading.close();
						console.log(res, 'show');
						if (res.code == 200) {
							self.product = res.data;
							self.product.content = self.text_img_reg(self.product.content);
							self.product.content = parserHtml.parserHTML(self.product.content);
							uni.hideLoading();
							// self.title = res.data.title;
							// self.product.content = self.adjustRichTextImageSize(self.product.content);
						} else {
							self.title = res.data;
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: res.data
							});
						}
					})
					
					
					// this.grace.post(this.apiUrl + "/hzj_apply/get_policy", post_data, function(res) {
					// 	self.$refs.guipageloading.close();
					// 	console.log(res, 'show');
					// 	if (res.code == 200) {
					// 		self.product = res.data;
					// 		self.product.content = self.text_img_reg(self.product.content);
					// 		self.product.content = parserHtml.parserHTML(self.product.content);
					// 		// self.title = res.data.title;
					// 		// self.product.content = self.adjustRichTextImageSize(self.product.content);
					// 	} else {
					// 		self.title = res.data;
					// 		uni.showModal({
					// 			title: '提示',
					// 			content: res.data
					// 		});
					// 	}
					// });
				} else {
					uni.showToast({
						icon: 'error',
						title: '数据错误!!'
					});
				}
			},
			close1: function() {
				this.$refs.guipopup1.close();
			},
			text_img_reg(text) {
				text = text.replace(/\<img/gi, '<img style=width:100%;margin:auto;');
				return text
			},
			tip(type, text) {
				if (type) {
					uni.showToast({
						icon: 'success',
						title: text
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: text
					})
				}
			}
		}
	}
</script>
<style scoped>
	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 700rpx;
		margin: 25rpx;
		height: 580rpx;
	}

	.html_content {
		width: 100%;
	}

	.html_content image {
		width: 100rpx;
	}

	.order_content_v {
		width: 100%;
		border-bottom: #dfdfdf solid 1rpx;
		margin: 20rpx 0;
	}

	.hx_button {
		width: 40%;
		margin: 5%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		color: #fff;
	}

	.grace-comments-face {
		height: 60rpx;
		width: 60rpx;
		border-radius: 50%;
	}
</style>